import React, { useState } from 'react';
import {
  Card,
  Button,
  Tag,
  Dialog
} from 'tdesign-react';
import { SoundIcon } from 'tdesign-icons-react';

const LearningCard: React.FC<{ children: React.ReactNode; onClick: () => void; style?: React.CSSProperties }> = ({ children, onClick, style }) => (
  <div
    onClick={onClick}
    style={{
      background: 'linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)',
      borderRadius: '15px',
      margin: '8px',
      cursor: 'pointer',
      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
      minWidth: '120px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      ...style
    }}
    onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
      e.currentTarget.style.transform = 'translateY(-5px)';
      e.currentTarget.style.boxShadow = '0 8px 25px rgba(0,0,0,0.15)';
    }}
    onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
    }}
  >
    {children}
  </div>
);

const PronunciationButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (
  <Button
    onClick={onClick}
    shape="circle"
    theme="success"
    style={{
      minWidth: '48px',
      width: '48px',
      height: '48px'
    }}
  >
    <SoundIcon />
  </Button>
);

interface WordInfo {
  word: string;
  pinyin: string;
  meaning: string;
  category: string;
  example: string;
}

const WORD_LIBRARY: WordInfo[] = [
  { word: '猫', pinyin: 'māo', meaning: '小动物，会抓老鼠', category: '动物', example: '小猫很可爱' },
  { word: '狗', pinyin: 'gǒu', meaning: '人类的好朋友', category: '动物', example: '小狗汪汪叫' },
  { word: '花', pinyin: 'huā', meaning: '美丽的植物', category: '植物', example: '花儿很香' },
  { word: '太阳', pinyin: 'tài yáng', meaning: '给我们光和热', category: '自然', example: '太阳高高挂' },
  { word: '月亮', pinyin: 'yuè liàng', meaning: '夜晚的明灯', category: '自然', example: '月亮圆又亮' },
  { word: '爸爸', pinyin: 'bà ba', meaning: '我的父亲', category: '家庭', example: '爸爸爱我们' },
  { word: '妈妈', pinyin: 'mā ma', meaning: '我的母亲', category: '家庭', example: '妈妈做饭香' },
  { word: '书', pinyin: 'shū', meaning: '有知识的宝库', category: '学习', example: '我爱读书' }
];

const WordLearning: React.FC = () => {
  const [selectedWord, setSelectedWord] = useState<WordInfo | null>(null);
  const [open, setOpen] = useState(false);

  const handleWordClick = (word: WordInfo) => {
    setSelectedWord(word);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const speakWord = (text: string) => {
    if ('speechSynthesis' in window) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'zh-CN';
      utterance.rate = 0.8;
      speechSynthesis.speak(utterance);
    }
  };

  const categories = ['动物', '植物', '自然', '家庭', '学习'];
  const categoryColors = {
    '动物': '#ffeb3b',
    '植物': '#4caf50', 
    '自然': '#2196f3',
    '家庭': '#e91e63',
    '学习': '#ff9800'
  };

  return (
    <div>
      <div style={{ textAlign: 'center', marginBottom: '24px' }}>
        <h2
          style={{
            fontFamily: '"Comic Sans MS", cursive, sans-serif',
            color: '#333',
            marginBottom: '16px',
            fontSize: '2rem'
          }}
        >
          📚 汉字学习园地 📚
        </h2>
        <p style={{ color: '#666', fontSize: '1rem' }}>
          点击汉字了解更多知识！
        </p>
      </div>

      {categories.map(category => (
        <div key={category} style={{ marginBottom: '24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
            <Tag 
              style={{
                backgroundColor: categoryColors[category as keyof typeof categoryColors],
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '1rem',
                padding: '8px'
              }}
            >
              {category}
            </Tag>
          </div>
          
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
            {WORD_LIBRARY
              .filter(word => word.category === category)
              .map((wordInfo, index) => (
                <LearningCard 
                  key={index}
                  onClick={() => handleWordClick(wordInfo)}
                >
                  <div style={{ textAlign: 'center', padding: '16px' }}>
                    <div
                      style={{
                        fontFamily: '"SimSun", serif',
                        marginBottom: '8px',
                        fontSize: '2rem',
                        fontWeight: 'bold'
                      }}
                    >
                      {wordInfo.word}
                    </div>
                    <div
                      style={{ 
                        fontSize: '0.9rem',
                        color: '#666'
                      }}
                    >
                      {wordInfo.pinyin}
                    </div>
                  </div>
                </LearningCard>
              ))
            }
          </div>
        </div>
      ))}

      <Dialog visible={open} onClose={handleClose} width="600px">
        <div style={{ textAlign: 'center', paddingBottom: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '16px' }}>
            <span
              style={{ 
                fontFamily: '"SimSun", serif',
                fontSize: '3rem',
                fontWeight: 'bold'
              }}
            >
              {selectedWord?.word}
            </span>
            <PronunciationButton
              onClick={() => selectedWord && speakWord(selectedWord.word)}
            />
          </div>
        </div>
        
        <div style={{ padding: '20px' }}>
          {selectedWord && (
            <div style={{ textAlign: 'center', padding: '16px 0' }}>
              <div style={{ marginBottom: '24px' }}>
                <h3 style={{ color: '#1976d2', marginBottom: '8px', fontSize: '1.5rem' }}>
                  📖 拼音
                </h3>
                <div
                  style={{ 
                    fontFamily: '"Arial", sans-serif',
                    color: '#ff5722',
                    fontWeight: 'bold',
                    fontSize: '2rem'
                  }}
                >
                  {selectedWord.pinyin}
                </div>
              </div>

              <div style={{ marginBottom: '24px' }}>
                <h3 style={{ color: '#1976d2', marginBottom: '8px', fontSize: '1.5rem' }}>
                  💡 含义
                </h3>
                <div
                  style={{ 
                    fontFamily: '"Comic Sans MS", cursive, sans-serif',
                    color: '#333',
                    fontSize: '1.25rem'
                  }}
                >
                  {selectedWord.meaning}
                </div>
              </div>

              <div style={{ marginBottom: '24px' }}>
                <h3 style={{ color: '#1976d2', marginBottom: '8px', fontSize: '1.5rem' }}>
                  🌟 例句
                </h3>
                <div
                  style={{ 
                    fontFamily: '"SimSun", serif',
                    color: '#2e7d32',
                    fontWeight: 'bold',
                    fontSize: '1.25rem',
                    marginBottom: '12px'
                  }}
                >
                  "{selectedWord.example}"
                </div>
                <Button
                  onClick={() => speakWord(selectedWord.example)}
                  style={{ marginTop: '12px' }}
                >
                  <SoundIcon style={{ marginRight: '8px' }} />
                  听例句
                </Button>
              </div>

              <Tag 
                style={{
                  backgroundColor: categoryColors[selectedWord.category as keyof typeof categoryColors],
                  color: '#fff',
                  fontSize: '1rem',
                  padding: '8px'
                }}
              >
                {selectedWord.category}类
              </Tag>
            </div>
          )}
        </div>
        
        <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: '24px' }}>
          <Button 
            onClick={handleClose}
            theme="success"
            size="large"
            style={{
              borderRadius: '25px',
              padding: '12px 32px'
            }}
          >
            我知道了！
          </Button>
        </div>
      </Dialog>
    </div>
  );
};

export default WordLearning;